//import './styles.css';
import { Home } from './page/Home.jsx';
import { About } from './page/About.jsx';
import { HashRouter, Link, Route, Switch } from 'inula-router';

// 定义一些页面组件 
//const Home = () => <h1>Home Page</h1>;
// const About = () => About;
const Contact = () => <h1>Contact Page</h1>;
const NotFound = () => <h1>404 Not Found</h1>;

// 定义一个 App 组件，使用 BrowserRouter 和 Switch 来创建路由
function App() {
  return (
    <HashRouter>
      <div>
        <Link to='/'>Home</Link>
        <Link to='/about'>About</Link>
        <Link to='/contact'>Contact</Link>
        {/* 使用 Switch 来渲染匹配到的第一个子路由 */}
        <Switch>
          {/* 使用 exact 属性来确保只有当 URL 完全匹配时才渲染组件 */}
          <Route exact path='/' component={Home} />
          <Route path='/about' component={About} />
          <Route path='/contact' component={Contact} />
          {/* 使用 * 来匹配上述以外的 URL，渲染 NotFound 组件 */}
          <Route path='*' component={NotFound} />
        </Switch>
      </div>
    </HashRouter>
  );
};

export default App;
